<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>刮刮卡</title>
<link href="../../css/reward.css" rel="stylesheet" type="text/css">
</head>
<script type="text/javascript">
function loading(canvas, options) {
	this.canvas = canvas;
	if (options) {
		this.radius = options.radius || 12;
		this.circleLineWidth = options.circleLineWidth || 4;
		this.circleColor = options.circleColor || 'lightgray';
		this.moveArcColor = options.moveArcColor || 'gray';
	} else {
		this.radius = 12;
		this.circelLineWidth = 4;
		this.circleColor = 'lightgray';
		this.moveArcColor = 'gray';
	}
}
loading.prototype = {
	show: function() {
		var canvas = this.canvas;
		if (!canvas.getContext) return;
		if (canvas.__loading) return;
		canvas.__loading = this;
		var ctx = canvas.getContext('2d');
		var radius = this.radius;
		var me = this;
		var rotatorAngle = Math.PI * 1.5;
		var step = Math.PI / 6;
		canvas.loadingInterval = setInterval(function() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			var lineWidth = me.circleLineWidth;
			var center = {
				x: canvas.width / 2,
				y: canvas.height / 2
			};

			ctx.beginPath();
			ctx.lineWidth = lineWidth;
			ctx.strokeStyle = me.circleColor;
			ctx.arc(center.x, center.y + 20, radius, 0, Math.PI * 2);
			ctx.closePath();
			ctx.stroke();
			//在圆圈上面画小圆   
			ctx.beginPath();
			ctx.strokeStyle = me.moveArcColor;
			ctx.arc(center.x, center.y + 20, radius, rotatorAngle, rotatorAngle + Math.PI * .45);
			ctx.stroke();
			rotatorAngle += step;

		},
		100);
	},
	hide: function() {
		var canvas = this.canvas;
		canvas.__loading = false;
		if (canvas.loadingInterval) {
			window.clearInterval(canvas.loadingInterval);
		}
		var ctx = canvas.getContext('2d');
		if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height);
	}
};
</script>
<script src="../../js/jquery-1.7.2.min.js" type="text/javascript"></script> 
<script src="../../js/wScratchPad.js" type="text/javascript"></script>
<script src="../../js/alert.js" type="text/javascript"></script> 
<script type="text/javascript">
window.sncode = "null";
window.prize = "谢谢参与";

var zjl = false;
var num = 0;
var goon = true;
$(function() {
	$("#scratchpad").wScratchPad({
		width: 150,
		height: 40,
		color: "#a9a9a7",
		scratchMove: function() {
			num++;
			if (num == 2) {
				document.getElementById('prize').innerHTML = "谢谢参与";
			}

			if (zjl && num > 5 && goon) {
				//$("#zjl").fadeIn();
				goon = false;

				$("#zjl").slideToggle(500);
				//$("#outercont").slideUp(500)
			}
		}
	});

	//$("#prize").html("谢谢参与");
	//loadingObj.hide();
	//$(".loading-mask").remove();
});

$("#save-btn").bind("click", function() {
	var btn = $(this);
	var tel = $("#tel").val();
	if (tel == '') {
		alert("请输入手机号");
		return
	}

	var submitData = {
		tid: 438,
		code: $("#sncode").text(),
		tel: tel,
		action: "setTel"
	};
	$.post('index.php?ac=acw', submitData,
	function(data) {
		if (data.success == true) {
			alert(data.msg);
			return
		} else {}
	},
	"json")
});

// 保存数据
$("#save-btnn").bind("click", function() {
	//var btn = $(this);
	var submitData = {
		tid: 438,
		code: $("#sncode").text(),
		parssword: $("#parssword").val(),
		action: "setTel"
	};
	$.post('index.php?ac=acw', submitData,
	function(data) {
		if (data.success == true) {
			alert(data.msg);
			if (data.changed == true) {
				window.location.href = location.href;
			}
			return
		} else {}
	},
	"json")
});
</script>
</head>
<body data-role="page" class="activity-scratch-card-winning" style="background:url(../../images/rewardBody1.jpg) no-repeat top center #fff987;">
<div class="main">
  <div class="cover"> <img src="../../images/activity-scratch-card-bannerbg.png">
    <div id="prize"> </div>
    <div id="scratchpad"> </div>
  </div>
  <div class="content">
    <div id="zjl" style="display:none" class="boxcontent boxwhite">
      <div class="box">
        <div class="title-red"> <span> 恭喜你中奖了 </span> </div>
        <div class="Detail">
          <p> 你中了： <span class="red"> 谢谢参与 </span> </p>
          <p> 兑奖SN码： <span class="red" id="sncode"> null </span> </p>
          <p class="red"></p>
          <p>
            <input name="" class="px" id="tel" value="" type="text" placeholder="用户请输入您的手机号">
          </p>
          <p>
          <p>
            <input class="pxbtn" name="提 交" id="save-btn" type="button" value="用户提交">
          </p>
          <p>
            <input name="" class="px" id="parssword" type="password" value="" placeholder="商家输入兑奖密码">
          </p>
          <p>
            <input class="pxbtn" name="提 交" id="save-btnn" type="button" value="商家提交">
          </p>
        </div>
      </div>
    </div>
    <div class="boxcontent boxwhite">
      <div class="box">
        <div class="title-brown" style="background-position:-140px -35px;"></div>
        <div class="Detail">
          <p> 一等奖： iphone5s </p>
          <p> 二等奖： ipad air</p>
          <p> 三等奖： ipod </p>
        </div>
      </div>
    </div>
  </div>
  <div style="clear:both;"> </div>
</div>
</body>
</html>